<template>
    <!-- 查询结果列表 -->
    <el-table :data="clientListData" style="width: 100%">
        <el-table-column type="selection" width="50" align="center"/>
        <el-table-column label="客户端" align="center" prop="clientId"/>
        <el-table-column label="授权方式" align="center" width="150">
            <template v-slot="scope">
                <el-select disabled :multiple="true" v-model="scope.row.authorizedGrantTypes">
                    <el-option
                            v-for="dict in grantTypeOptions"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue"
                    ></el-option>
                </el-select>
            </template>
        </el-table-column>
        <el-table-column label="授权范围" align="center" width="150">
            <template v-slot="scope">
                <el-select disabled v-model="scope.row.scope">
                    <el-option
                            v-for="dict in scopeOptions"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue"
                    ></el-option>
                </el-select>
            </template>
        </el-table-column>
        <el-table-column label="授权资源列表" align="center" prop="resourceIds" :show-overflow-tooltip="true" />
        <el-table-column label="授权权限" align="center" prop="authorities"/>
        <el-table-column label="令牌时效" align="center" prop="accessTokenValidity"/>
        <el-table-column label="刷新时效" align="center" prop="refreshTokenValidity"/>
        <el-table-column label="回调地址" align="center" prop="webServerRedirectUri" :show-overflow-tooltip="true" />
        <el-table-column label="预留字段" align="center" prop="additionalInformation"/>
        <el-table-column label="自动放行" align="center" prop="autoapprove"/>
        <el-table-column label="操作" align="center" width="250px">
            <template v-slot="scope">
                <el-button icon="el-icon-edit"
                           @click="handleUpdateAuth(scope.row)">修改
                </el-button>
                <el-button icon="el-icon-delete"
                           @click="handleDeleteAuth(scope.row)">删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 新增或修改 -->
    <update-auth :title="title" :open="open" :form="form"
                 :scope-options="scopeOptions"
                 :grant-type-options="grantTypeOptions"
                 v-on:dialogStatusChanged="changeDialogStatus($event)"></update-auth>
</template>

<script>

    import UpdateAuth from './update.vue'
    import {getAuthList} from '/src/api/app/auth'

    export default {
        name: "index",
        components: {UpdateAuth},
        data() {
            return {
                //应用授权类型
                grantTypeOptions: [],
                //应用授权范围
                scopeOptions: [],
                clientListData: [],
                clientListTotal: 0,
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                },
                //新增或修改
                open: false,
                title: '',
                form: {},
            }
        },
        created() {
            this.init();
        },
        methods: {
            init() {
                this.getDicts("grant_type").then(response => {
                    this.grantTypeOptions = response.data;
                });
                this.getDicts("scope").then(response => {
                    this.scopeOptions = response.data;
                });
                this.getAuthListByParam();
            },
            getAuthListByParam() {
                getAuthList(this.queryParams).then((res) => {
                    this.clientListData = res.rows
                    if (this.clientListData) {
                        this.clientListData.forEach((clientInfo) => {
                            //授权方式
                            let authorizedGrantTypes = clientInfo.authorizedGrantTypes;
                            if (authorizedGrantTypes) {
                                clientInfo.authorizedGrantTypes = authorizedGrantTypes.split(',')
                            }
                        })
                    }
                    this.clientListTotal = res.total
                })
            },
            handleUpdateAuth(row) {
                this.open = true
                this.form = row
                this.title = '修改应用授权信息'
            },
            handleDeleteAuth(row) {

            },
            //更改弹出框的状态
            changeDialogStatus(status) {
                this.open = status
                this.getAuthListByParam()
            },
        },
    }
</script>

<style scoped>

</style>
